<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插图和自动编号</title>
    <style>

        body{
            /*counter-reset:重置一个计数器,属性值是一个标识符,用来代表计数器,计数器默认的计数是从0开始*/
            counter-reset: pic;
        }

        figure{
            text-align: center;

            /*counter-increment:让某一个计数器,计数加1*/
            counter-increment: pic;
        }

        figcaption::before{

            /*content()用来获取某一个计数器的计数*/
            content: '图' counter(pic) ": ";
        }

    </style>
</head>
<body>
    
    <figure>
        <img src="lry.jpg" alt="刘若英">
        <figcaption>刘若英,内地著名女歌手</figcaption>
        <figcaption lang="en">Ruoying Liu</figcaption>
    </figure>

    <figure>
        <img src="lry.jpg" alt="刘若英">
        <figcaption>刘若英,内地著名女歌手</figcaption>
        <figcaption lang="en">Ruoying Liu</figcaption>
    </figure>

    <figure>
        <img src="lry.jpg" alt="刘若英">
        <figcaption>刘若英,内地著名女歌手</figcaption>
        <figcaption lang="en">Ruoying Liu</figcaption>
    </figure>

    <figure>
        <img src="lry.jpg" alt="刘若英">
        <figcaption>刘若英,内地著名女歌手</figcaption>
        <figcaption lang="en">Ruoying Liu</figcaption>
    </figure>
</body>
</html>